<template>
  <el-dialog title="映射关系配置" :visible.sync="dialogVisible" :before-close="handleClose" width="1200"
    :close-on-click-modal="false">
    <div>
      <span style="color: #f00;">注：</span>
      <span>MS为必填项，用于裕度比较计算。建议填写目标字段：Position(部位)，LoadCase(工况)，SWork(工作应力/载荷)，SAdmis(许用应力/载荷)(不填写将导致该算例整体裕度汇总表内无值)。</span>
    </div>
    <el-form size="small" inline ref="dialogFormRef">
      <div style="padding: 10px 10px 0 10px;" v-for="(item,index) in relations">
        <el-form-item prop="name" label="字段名称:">
          <el-input placeholder="请输入" v-model="item.name" :disabled="index == 0" style="width: 100px;" />
        </el-form-item>
        <el-form-item prop="resultCode" label="映射来源KEY:">
          <el-input placeholder="请输入" v-model="item.resultCode" style="width: 100px;" />
        </el-form-item>
        <el-form-item prop="code" label="映射目标KEY:">
          <el-input placeholder="请输入" v-model="item.code" :disabled="index == 0" style="width: 100px;" />
        </el-form-item>
        <el-form-item prop="needFloor" label="是否保留两位小数:">
          <el-switch v-model="item.needFloor"></el-switch>
        </el-form-item>
        <el-form-item prop="tableCode" label="所属结果表:">
          <el-input placeholder="请输入" v-model="item.tableCode" />
        </el-form-item>
        <el-form-item prop="tableName" label="结果表中文名:">
          <el-input placeholder="请输入" v-model="item.tableName" />
        </el-form-item>
        <el-form-item prop="order" label="顺序:">
          <el-input v-model="item.order" type="number" style="width: 80px;"></el-input>
        </el-form-item>
        <el-button icon="el-icon-delete" type="primary" size="small" :disabled="index == 0"
          @click="deleteItem(item)">删除</el-button>
      </div>
      <div style="width: 100%;padding-left: 83px;">
        <el-button style="width: 93.5%;" type="primary" @click="addItem()">新增映射关系</el-button>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { editAlgo } from "@/api/computingConfig.js";
  export default {
    name: "KeyRelationConfig",
    props: {
      datas: {
        type: Object,
        default: () => ({}),
      }
    },
    data() {
      return {
        dialogVisible: true,
        relations: [{ index: length, name: '裕度M.S', code: "MS", needFloor: false, resultCode: '', tableCode: '', order: null, tableName: '' }]
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      // 初始化数据
     async init() {
        if (this.datas?.algoResultMappingConfig && this.datas?.algoResultMappingConfig?.algoResultFieldMapping?.length > 0) {
          this.relations = this.datas?.algoResultMappingConfig?.algoResultFieldMapping;
         await this.relations.map((item, index) => {
            item.index = index;
            // item.tableName = this.datas?.algoResultMappingConfig?.algoResultTableMapping[index]?.tableName;
            item.tableCode = this.datas?.algoResultMappingConfig?.algoResultTableMapping[index]?.tableCode;
          })
        }
        console.log(this.datas?.algoResultMappingConfig?.algoResultTableMapping)
      },
      addItem() {
        const length = this.relations.length;
        this.relations.push({ index: length, name: '', code: "", needFloor: false, resultCode: '', tableCode: '', order: null, tableName: '' })
      },
      deleteItem(data) {
        this.relations = this.relations.filter(item => {
          return !(item.index == data.index);
        });
        let index = 0;
        this.relations.map(item => {
          item.index = index;
          index++;
        })
      },
      handleClose() {
        this.$emit("on-close");
      },
      async handleSure() {
        // 数据校验
        let validate = true;
        // for (let i = 0; i < this.relations.length; i++) {
        //   if (!this.relations[i].name || !this.relations[i].code || !this.relations[i].resultCode) {
        //     this.$message.error("字段映射不能为空！");
        //     validate = false;
        //     break;
        //   }
        // }
        // 提交数据
        if (validate) {
          const params = { ...this.datas };
          params.algoResultMappingConfig = { algoResultFieldMapping: [], algoResultTableMapping: [] }
          const paramsArr = await this.relations.map(item => {
            return { code: item.code || '', name: item.name || '', needFloor: item.needFloor || '', resultCode: item.resultCode || '', tableCode: item.tableCode || '', order: item.order || ''};
          });
          const tablesArr = await this.relations.map(item => {
            return { tableCode: item.tableCode || '', tableName: item.tableName || '' };
          });
          params.algoResultMappingConfig.algoResultFieldMapping = [...paramsArr];
          params.algoResultMappingConfig.algoResultTableMapping = [...tablesArr];
          editAlgo(params).then((res) => {
            this.$emit("on-sure");
            this.$emit("on-close");
            this.$message.success("编辑成功！");
          });
        }
      },
    },
  };
</script>

<style scoped>
  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-delete {
    cursor: pointer;
  }

  .card-delete:hover {
    color: #f00;
  }

  ::v-deep .el-dialog {
    width: 90%;
  }
</style>